<template>
  <div class="score_list">
    <div class="hanner_img_title">
      <strong>{{semesterData.actualGradeName}}·{{semesterData.specialtyName}}</strong>
      <p>{{semesterData.kkxqName}}({{semesterData.actualGradeName}}) <span @click="showClassList = true">切换</span></p>
    </div>
    <van-tabs v-model="active" color="#027FFE" title-active-color="#027FFE" line-width="40px" @click="openTab">
      <van-tab title="考核要求" name="a">
        <div v-if="semesterData" class="tab_item_a">
          <div class="title_name">同学,你好</div>
          <p>欢迎你进入本学期的学习，请根据以下考核规则及操作指引完成学习任务：</p>
          <img @click="openPhone" class="img_video"  src="../../../assets/img/modules/score/video_paly.png" alt="">
          <div class="title_span">操作规则</div>
          <div class="tab_list">
            <van-collapse v-model="activeRule" accordion>
              <van-collapse-item title="【规则1】课程考核规则说明" name="a">
                <img src="../../../assets/img/modules/score/sm_3.png" alt="">
              </van-collapse-item>
              <van-collapse-item title="【规则2】课程学习要完成的内容" name="b">
                <img src="../../../assets/img/modules/score/sm_4.png" alt="">
              </van-collapse-item>
            </van-collapse>
          </div>
          <div class="title_span">操作指引</div>
          <div class="tab_list">
            <van-collapse v-model="activeRule" accordion>
              <van-collapse-item title="【指引1】如何切换旧版学习模式？" name="1">
                <img src="../../../assets/img/modules/score/sm_5.png" alt="">
              </van-collapse-item>
              <van-collapse-item title="【指引2】如何获得平时成绩？" name="2">
                <img src="../../../assets/img/modules/score/sm_6.png" alt="">
              </van-collapse-item>
              <van-collapse-item title="【指引3】形考任务有哪些？" name="3">
                <img src="../../../assets/img/modules/score/sm_1.png" alt="">
              </van-collapse-item>
              <van-collapse-item title="【指引4】我的形考任务任务为什么做不了？" name="4">
                <img src="../../../assets/img/modules/score/sm_2.png" alt="">
              </van-collapse-item>
            </van-collapse>
          </div>
        </div>
        <div class="footer_btn">
          <button  @click="openTab ('b')">了解本学期课程</button>
        </div>
      </van-tab>
      <van-tab title="课程列表" name="b">
        <div class="tab_score_item">
          <div class="tab_kc">
            <div class="tab_item">
              <p>本学期课程</p>
              <strong>{{courseData.courseTotal}} <span>门</span></strong>
            </div>
            <div class="tab_item">
              <p>已通过考核的课程</p>
              <strong>{{courseData.courseAchieve}} <span>门</span></strong>
            </div>
          </div>
          <div class="tab_list">
            <div class="tab_item" v-for="(item, index) in courseData.courseList" :key="item.courseName + '' + index"  @click="goCoureIndex(item.courseId, item.classId, 0, item.learningStyle, item.szkUrl, item.gradeId)">
              <img :src="'http://m.oucgz.cn/images/ico_'+index%12+'.png'" alt="">
              <div class="item_text_body">
                <h3>{{item.courseName}}</h3>
                <p v-if="item.learningStyle !== '0'"> {{item.szkUrl !== null ? '来自国开学习网' : '该课程不支持手机端，请到电脑端进行学习。'}}</p>
                <img v-if="item.examState === '0'" class="label_img" src="../../../assets/img/modules/score/score_11.png" alt="">
                <img v-if="item.examState === '1'" class="label_img" src="../../../assets/img/modules/score/score_14.png" alt="">
                <img v-if="item.examState === '2'" class="label_img" src="../../../assets/img/modules/score/score_15.png" alt="">
                <img v-if="item.examState === '3'" class="label_img" src="../../../assets/img/modules/score/score_13.png" alt="">
              </div>
              <div class="bottom_body">
                <div class="bottom_item">
                  <strong>{{item.behaviorAchieve}} <span>次</span></strong>
                  <p>学习次数</p>
                </div>
                <div class="bottom_item">
                  <strong>{{item.achieveVideoNum}} <span>个</span></strong>
                  <p>视频学习</p>
                </div>
                <div class="bottom_item">
                  <strong>{{item.studyScore}} <span>分</span></strong>
                  <p>平时成绩</p>
                </div>
                <div class="bottom_item">
                  <strong v-if="item.examScore">{{item.examScore}} <span>分</span></strong>
                  <strong v-else><span>未考试</span></strong>
                  <p>期末考试成绩</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-if="courseData.remedyCourseList.length > 0" class="tab_score_item">
          <div class="tab_kc">
            <div class="tab_item">
              <p>本学期需要补修课程</p>
              <strong>{{courseData.remedyTotal}} <span>门</span></strong>
            </div>
            <div class="tab_item">
              <p>已完成课程</p>
              <strong>{{courseData.remedyComplete}} <span>门</span></strong>
            </div>
          </div>
          <div class="tab_list">
            <div class="tab_item" v-for="(item, index) in courseData.remedyCourseList" :key="item.gradeId+ '' + index" @click="goCoureIndex(item.courseId, item.classId, 0, item.learningStyle, item.szkUrl, item.gradeId)">
              <img :src="'http://m.oucgz.cn/images/ico_'+index%12+'.png'" alt="">
              <div class="item_text_body">
                <h3>{{item.courseName}}</h3>
                <p v-if="item.learningStyle !== '0'"> {{item.szkUrl !== null ? '来自国开学习网' : '该课程不支持手机端，请到电脑端进行学习。'}}</p>
                <img v-if="item.examState === '0'" class="label_img" src="../../../assets/img/modules/score/score_11.png" alt="">
                <img v-if="item.examState === '1'" class="label_img" src="../../../assets/img/modules/score/score_14.png" alt="">
                <img v-if="item.examState === '2'" class="label_img" src="../../../assets/img/modules/score/score_15.png" alt="">
                <img v-if="item.examState === '3'" class="label_img" src="../../../assets/img/modules/score/score_13.png" alt="">
              </div>
              <div class="bottom_body">
                <div class="bottom_item">
                  <strong>{{item.behaviorAchieve}} <span>次</span></strong>
                  <p>学习次数</p>
                </div>
                <div class="bottom_item">
                  <strong>{{item.achieveVideoNum}} <span>个</span></strong>
                  <p>视频学习</p>
                </div>
                <div class="bottom_item">
                  <strong>{{item.studyScore}} <span>分</span></strong>
                  <p>平时成绩</p>
                </div>
                <div class="bottom_item">
                  <strong v-if="item.examScore">{{item.examScore}} <span>分</span></strong>
                  <strong v-else><span>未考试</span></strong>
                  <p>期末考试成绩</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="形考任务" name="c">
        <div class="tab_item_c">
          <van-notice-bar wrapable :scrollable="false" left-icon="http://m.oucgz.cn/images/tishi.png" mode="closeable">
            平时学习成绩100％来自形考任务获得分数，并占期末综合考核分数一定比例，完成形考任务就拿分！
          </van-notice-bar>
          <div class="tab_kc">
            <div class="tab_item">
              <p>本学期任务</p>
              <strong>{{workData.homeworkTotal}} <span>个</span></strong>
            </div>
            <div class="tab_item">
              <p>已完成任务</p>
              <strong>{{workData.homeworkAchieve}} <span>个</span></strong>
            </div>
            <div class="tab_item">
              <p>待完成任务</p>
              <strong>{{workData.homeworkUnfinished}} <span>个</span></strong>
            </div>
          </div>
          <div class="class_list">
            <div v-for="(item, index) in workList" :key="item.courseId" class="class_item" :class="activeClass === index ? 'active' : ''" @click="activeClass = index">
              <div class="tab_img_bg">
                <strong>{{item.courseName}}</strong>
                <p>共获平时成绩 <span>{{item.obtainScore}}</span> 分</p>
                <img src="../../../assets/img/modules/score/icon_up.png" alt="">
              </div>
              <div v-for="pItem in item.list" :key="pItem.actId + '_' + index" @click="openWordApp(pItem)"
                   :class="pItem.openStatus === '1' ? pItem.proOver === 'Y' ? 'p_list success' : 'p_list wait' : 'p_list no'">
                <van-icon v-if="pItem.openStatus ==='1' && pItem.proOver === 'Y'" name="passed" />
                <van-icon v-if="pItem.openStatus ==='1' && pItem.proOver === 'N'"  name="circle" />
                <van-icon v-if="pItem.openStatus ==='1' && pItem.proOver === '0'"  name="circle" />
                <van-icon v-if="pItem.openStatus ==='0'" name="clock-o" />
                <div class="name_text">{{pItem.homeworkName}}</div>
                <span>{{pItem.openStatus === '1' ? pItem.proOver === 'Y' ? '已完成' : '未完成' : '未开放'}}</span>
              </div>
              <!--<div class="p_list wait">
                <van-icon name="circle" />
                <div class="name_text">形考任务（一）</div>
                <span>待完成</span>
              </div>
              <div class="p_list no">
                <van-icon name="clock-o" />
                <div class="name_text">形考任务（一）</div>
                <span>未开放</span>
              </div>-->
            </div>
          </div>
          <div v-if="workData.openStatus === '0'" class="no_work">
            <img  src="../../../assets/img/modules/score/no_homework.png" alt="">
            <p>本学期作业暂未开放</p>
          </div>
        </div>
      </van-tab>
    </van-tabs>
    <van-action-sheet v-model="showClassList" :actions="classList" @select="onSelect" />
  </div>
</template>
<script>
export default {
  name: 'score_list',
  components: {},
  data () {
    return {
      courseData: {
        remedyCourseList: []
      },
      workData: {
        homeworkAchieve: 0,
        homeworkTotal: 0,
        homeworkUnfinished: 0
      },
      workList: [],
      showClassList: false,
      classList: [],
      active: 'a',
      activeRule: '',
      activeTabC: '',
      gradeId: '',
      activeDate: '',
      dayTime: 0,
      activeClass: 0,
      semesterData: {
        specialtyName: '',
        actualGradeName: '',
        kkxqName: ''
      }
    }
  },
  props: {},
  watch: {},
  methods: {
    /* wf_Huang 2019/11/19 0019  */
    openPhone () {
      try {
        // eslint-disable-next-line no-undef
        Phone.watchVideo('09673858', '123456', '想拿过高分？你应该这样学！')
      } catch (err) {}
    },
    /* wf_Huang 2019/11/15 0015 跳转形考作业 */
    openWordApp (row) {
      if (row.openStatus === '1') {
        try {
          // eslint-disable-next-line no-undef
          Phone.goHomework(row.classId, row.courseId, row.termCourseId, row.courseName, row.chooseId, row.actName, row.actId, row.taskId, row.actTypeId, row.proOver)
        } catch (err) {}
      } else {
        this.$dialog.alert({
          title: '温馨提示',
          confirmButtonText: '知道了',
          message: row.openExplain
        }).then(() => {
          // on close
        })
      }
    },
    goCoureIndex (courseId, classId, index, learningStyle, szkUrl, gradeId) {
      if (index !== '0' && learningStyle === '0') {
        // eslint-disable-next-line no-undef
        Phone.goCourseIndex(courseId, classId, index)
        // eslint-disable-next-line no-undef
        Phone.goCourseDetail(courseId, classId, index, gradeId)
      } else {
        if (szkUrl !== null) {
          window.location.href = szkUrl
        } else {
          this.$dialog.alert({
            title: '温馨提示',
            confirmButtonText: '知道了',
            message: '本课程不支持手机端学习，请学生电脑登录学习平台（http://www.ouchn.cn，账号：学员学号，初始密码：学员出生年月日）继续完成学习任务。'
          }).then(() => {
            // on close
          })
        }
      }
    },
    /* wf_Huang 2019/10/28 0028 转换数字大小写  */
    changNumber (number) {
      let chnNumChar = ['一', '二', '三', '四', '五', '六', '七', '八', '九']
      return chnNumChar[number]
    },
    /*
     *@author wf_Huang
     *@Time 2019/8/8 0008 10:22
     *@function  获取学期列表
     *****************************************/
    getCalssList () {
      this.$http({
        url: `${window.SITE_CONFIG['personalListURL']}/api/kb/queryGradeInfos?studentId=${this.$store.state.score.studentId}`,
        method: 'get',
        withCredentials: false
      }).then(({ data: res }) => {
        if (res.msgCode !== 200) {
          this.$toast('请求失败，请重试')
          return false
        }
        this.classList = []
        res.data.gradeList.forEach((item, index) => {
          this.classList.push(
            {
              name: `第${this.changNumber(index)}学期 (${item.gradeName})`,
              startDate: item.startDate.replace('-', ''),
              ...item
            }
          )
        })
      }).catch(() => {})
    },
    /* wf_Huang 2019/10/25 0025  选择学期 */
    onSelect (item) {
      this.activeDate = item.startDate
      this.gradeId = item.gradeId
      this.showClassList = false
      this.getData()
      this.getCourse()
      this.getWord()
    },
    /*
     *@author wf_Huang
     *@Time 2019/8/8 0008 10:22
     *@function  获取课程情况
     *****************************************/
    getCourse () {
      this.$http({
        url: `${window.SITE_CONFIG['personalListURL']}/api/courseNew/termCourseList?studentId=${this.$store.state.score.studentId}&gradeId=${this.gradeId}`,
        method: 'get',
        withCredentials: false
      }).then(({ data: res }) => {
        if (res.msgCode !== 200) {
          this.$toast('请求失败，请重试')
          return false
        }
        this.courseData = res.data
      }).catch(() => {})
    },
    /* wf_Huang 2019/11/15 0015 获取形考作业 */
    getWord () {
      this.$http({
        url: `${window.SITE_CONFIG['personalListURL']}/api/courseNew/homeworkList?studentId=${this.$store.state.score.studentId}&gradeId=${this.gradeId}`,
        method: 'get',
        withCredentials: false
      }).then(({ data: res }) => {
        if (res.msgCode !== 200) {
          this.$toast('请求失败，请重试')
          return false
        }
        this.workData = res.data
        this.workList = []
        res.data.homeworkList.forEach(item => {
          let index = this.workList.findIndex(wordItem => wordItem.courseId === item.courseId)
          if (index === -1) {
            this.workList.push({
              courseName: item.courseName,
              courseId: item.courseId,
              obtainScore: parseFloat(item.obtainScore),
              list: [{
                homeworkName: item.homeworkName,
                actTypeName: item.actTypeName,
                actId: item.actId,
                classId: item.classId,
                courseId: item.courseId,
                openStatus: item.openStatus,
                obtainScore: item.obtainScore,
                openExplain: item.openExplain,
                termCourseId: item.termcourseId,
                courseName: item.courseName,
                actName: item.actName,
                taskId: item.taskId,
                actTypeId: item.actTypeId,
                proOver: item.proOver
              }]
            })
          } else {
            let _this = this
            this.workList[index].obtainScore = (parseFloat(_this.workList[index].obtainScore) + parseFloat(item.obtainScore)).toFixed(1)
            this.workList[index].list.push({
              homeworkName: item.homeworkName,
              actTypeName: item.actTypeName,
              actId: item.actId,
              classId: item.classId,
              courseId: item.courseId,
              obtainScore: item.obtainScore,
              openStatus: item.openStatus,
              openExplain: item.openExplain,
              termCourseId: item.termcourseId,
              courseName: item.courseName,
              actName: item.actName,
              taskId: item.taskId,
              actTypeId: item.actTypeId,
              proOver: item.proOver
            })
          }
        })
        console.log(this.workList)
      }).catch(() => {})
    },
    /*
     *@author wf_Huang
     *@Time 2019/8/8 0008 10:22
     *@function  获取学习统计信息
     *****************************************/
    getData () {
      let timeText = ''
      if (this.activeDate) {
        timeText = this.activeDate
      } else {
        timeText = this.getDateTime()
      }
      this.$http({
        url: `${window.SITE_CONFIG['personalListURL']}/api/courseNew/specialtyStudyStatis?lessonDate=${timeText}&studentId=${this.$store.state.score.studentId}`,
        method: 'get',
        withCredentials: false
      }).then(({ data: res }) => {
        if (res.msgCode !== 200) {
          this.$toast('请求失败，请重试')
          return false
        }
        this.semesterData = res.data
      }).catch(() => {})
    },
    getDateTime () {
      var date = new Date()
      var year = date.getFullYear()
      var month = date.getMonth() + 1
      var strDate = date.getDate()
      if (month >= 1 && month <= 9) {
        month = '0' + month
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = '0' + strDate
      }
      var currentdate = year.toString() + month.toString() + strDate.toString()
      return currentdate
    },
    openTab (value) {
      this.active = value
      if (value === 'a') {
        this.getData()
      }
      if (value === 'b') {
        this.getCourse()
      }
      if (value === 'c') {
        this.getWord()
      }
    }
  },
  computed: {},
  created () {
  },
  mounted () {
    document.querySelector('body').setAttribute('style', 'background-color:#F6F6F6')

    if (this.$route.query.studentId) {
      this.$store.state.score.studentId = this.$route.query.studentId
      localStorage.setItem('stateData', JSON.stringify(this.$store.state))
    }
    if (this.$route.query.gradeId) {
      this.$store.state.score.gradeId = this.$route.query.gradeId
      localStorage.setItem('stateData', JSON.stringify(this.$store.state))
    }
    if (this.$route.query.active) {
      this.$store.state.score.active = this.$route.query.active
      localStorage.setItem('stateData', JSON.stringify(this.$store.state))
    }
    this.active = this.$store.state.score.active
    this.gradeId = this.$store.state.score.gradeId
    this.openTab(this.active)
    this.getData()
    this.getCalssList()
  },
  destroyed () {
    document.querySelector('body').removeAttribute('style')
  }
}
</script>
<style lang="scss" scoped>
  .score_list {
    max-width: 750px;
    margin: 0 auto;
    .hanner_img_title{
      width: 750px;
      height: 170px;
      background: url("../../../assets/img/modules/score/list_01.png") no-repeat center;
      background-size: 100% 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      strong{
        font-size:38px;
        color: #ffffff;
      }
      p{
        font-size:28px;
        color: #ffffff;
        margin: 10px;
        position: relative;
        span{
          border: 1px solid #FFFFFF;
          border-radius: 35px;
          top: 0;
          right: -90px;
          padding: 0 10px;
          height: 35px;
          align-items: center;
          position: absolute;
          display: block;
        }
      }
    }
    .tab_item_a{
      padding: 32px 32px 240px;
      background-color: #FFFFFF;
      .title_name{
        font-size: 36px;
        color: #222222;
      }
      p{
        font-size: 28px;
        color: #666666;
      }
      video,.img_video{
        width: 686px;
        height: 380px;
      }
      .title_span{
        font-size: 32px;
        color: #333333;
        border-left: 3px solid #027FFE;
        padding-left: 10px;
        line-height: 15px;
        margin: 60px 0;
      }
      .tab_list{
        margin: -30px;
        font-size: 24px;
        color: #111111;
        strong{
          color: #666666;
        }
        p{
          margin: 0 0 15px;
          color: #999999;
        }
        img{
          width: 100%;
          height: auto;
        }
      }
    }
    .tab_item_c{
      background-color: #FFFFFF;
      .tab_kc{
        display: flex;
        align-content: center;
        justify-content: center;
        padding: 60px 0;
        .tab_item{
          flex: 1;
          text-align: center;
          strong{
            font-size: 52px;
            color: #1F93FD;
            letter-spacing: 0;
            display: block;
            span{
              font-size:24px;
              font-weight:normal;
              color:rgba(34,34,34,1);
            }
          }
          p{
            font-size: 22px;
            color: #666666;
            letter-spacing: 0;
            margin: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            img{
              width: 28px;
              height: 28px;
              margin-left: 15px;
            }
          }
        }
      }
      .class_list{
        padding: 32px;
        .class_item{
          margin-bottom: 30px;
          max-height: 164px;
          overflow: hidden;
          transition: all 0.3s;
          .tab_img_bg{
            background: url("../../../assets/img/modules/score/sm_tab_bg.png") no-repeat center;
            background-size: 100%;
            height: 164px;
            width: 686px;
            padding: 30px 26px;
            position: relative;
            strong{
              font-size: 36px;
              color: #222222;
              display: block;
            }
            p{
              font-size: 26px;
              color: #666666;
              margin: 15px 0;
              span{
                font-size: 42px;
                color: #027FFE;
                font-weight: bold;
              }
            }
            img{
              width: 48px;
              height: 48px;
              position: absolute;
              right: 10px;
              top: 50%;
              transition: all 0.3s;
              transform: translate(-50%, -50%)  rotate(0deg);
            }
          }
          .p_list{
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 30px 0;
            font-size: 28px;
            color: #222222;
            .name_text{
              width: 80%;
            }
          }
          .success{
            color: #999999;
            i{
              color: #C8C8C8;
            }
          }
          .wait{
            color: #222222;
            i{
              color: #C8C8C8;
            }
            span{
              color: #027FFE;
            }
          }
          .no{
            color: #C8C8C8;
          }
        }
        .active{
          max-height: 1000px;
          .tab_img_bg{
            img{
              transform: translate(-50%, -50%) rotate(180deg);
            }
          }
        }
      }
    }
    .footer_btn{
      height:148px;
      background:rgba(255,255,255,1);
      display: flex;
      align-items: center;
      justify-content: center;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      button{
        width:690px;
        height:88px;
        border: 0;
        background:rgba(2,127,254,1);
        border-radius:4px;
        font-size:32px;
        color: #ffffff;
      }
    }
    .tab_score_item{
      padding: 32px 32px 80px 32px;
      margin-top: 14px;
      background-color: #ffffff;
      .title{
        font-size: 36px;
        color: #4A4A4A;
        letter-spacing: 0;
        text-align: center;
        font-family: PingFangSC-Semibold;
        margin: 45px 0;
        text-align: center;
      }
      .tab_kc{
        display: flex;
        align-content: center;
        justify-content: center;
        margin: 60px 0;
        .tab_item{
          flex: 1;
          text-align: center;
          strong{
            font-size: 52px;
            color: #1F93FD;
            letter-spacing: 0;
            display: block;
            span{
              font-size:24px;
              font-weight:normal;
              color:rgba(34,34,34,1);
            }
          }
          p{
            font-size: 22px;
            color: #666666;
            letter-spacing: 0;
            margin: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            img{
              width: 28px;
              height: 28px;
              margin-left: 15px;
            }
          }
        }
      }
      .tab_list{
        .tab_item{
          background:rgba(246,246,246,1);
          border-radius: 8px;
          margin-top: 30px;
          padding: 30px;
          position: relative;
          width:686px;
          img{
            width: 80px;
            height: 80px;
            position: absolute;
          }
          .bottom_body{
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 35px;
            .bottom_item{
              strong{
                display: block;
                font-size:32px;
                color:rgba(34,34,34,1);
                text-align: center;
                span{
                  font-size:20px;
                  color:rgba(34,34,34,1)
                }
              }
              p{
                text-align: center;
                font-size:24px;
                margin: 10px 0;
                color:rgba(153,153,153,1);
              }
            }
          }
          .item_text_body{
            padding: 20px 20px 20px 100px;
            position: relative;
            border-radius: 8px;
            margin: -20px -20px -20px 0;
            h3{
              font-size: 32px;
              color: #222222;
              letter-spacing: 0;
              line-height: 40px;
              margin: 0 0 10px;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
              overflow:hidden;
            }
            p{
              font-size: 24px;
              color: #FF801A;
              letter-spacing: 0;
              line-height: 24px;
              margin: 0 0;
            }
            .label_img{
              position: absolute;
              width: auto;
              height: 36px;
              top: -18px;
              left: 520px;
            }
          }
        }
      }
    }
    .work_list{
      margin-top: 14px;
      background-color: #ffffff;
      padding: 40px 60px;
      .title_name{
        display: flex;
        justify-content: space-between;
        align-items: center;
        span{
          font-size:32px;
          color:rgba(34,34,34,1);
        }
        i{
          font-size: 32px;
          color: #999999;
        }
      }
      .tab_list{
        margin: 30px 0;
        display: flex;
        justify-content: center;
        align-items: center;
        .tab_item{
          flex: 1;
          &:nth-child(2){
            text-align: center;
          }
          &:nth-child(3){
            text-align: right;
          }
          strong{
            font-size:52px;
            font-weight:bold;
            display: block;
            color:rgba(31,147,253,1);
            span{
              font-size:22px;
              font-weight: normal;
              color:rgba(102,102,102,1);
            }
          }
          p{
            font-size:24px;
            color:rgba(102,102,102,1);
          }
        }
      }
    }
    .no_work{
      padding: 50px;
      text-align: center;
      img{
        display: block;
        margin: 0 auto;
        width: 400px;
      }
      p{
        font-size: 24px;
        color: #999999;
      }
    }
  }
</style>
